<template>
	<view class="mvtk-certificateCategory-box">
		<view class="title-box"> <span class="border"></span> 残疾类别 <view class="action">单位：万人</view>
		</view>

		<div class="grid-box" id="main-certificateCategory" style='height: 350upx;'></div>
	</view>
</template>

<script lang="ts" name="mvtkCertificateCategory" setup>
import * as echarts from 'echarts'
import { ref, onMounted } from "vue"
const data = [
	111,
	222,
	333,
	444,
	555,
	666,
	666,
]

onMounted(() => {
	// 获取DOM元素并且进行初始化
	var myChart = echarts.init(document.getElementById('main-certificateCategory'));
	// 创建图标
	myChart.setOption(
		{
			tooltip: {
				show: true,
				trigger: 'item',
				formatter: function (params) {
					var sum = 0;
					for (var i = 0; i < data.length; i++) {
						sum = sum + data[i];
					}
					return params.name + '：' + ((params.value / sum) * 100).toFixed(1) + '%';
				}
			},
			grid: {
				left: '6',
				right: '6',
				top: '30',
				bottom: '30'
			},
			xAxis: {
				//  y轴刻度线
				axisLine: { show: false },
				// 是否显示坐标轴刻度
				axisTick: {
					show: false
				},
				// 去掉网格线
				splitLine: {
					show: false
				},
				splitArea: {
					show: false
				},
				type: 'category',
				data: ['视力', '听力', '言语', '肢体', '智力', '精神', '多重']
			},
			yAxis: {
				show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				}
			},
			series: [
				{
					data: data,
					type: 'bar',
					stack: 'Total',
					label: {
						show: true,
						position: 'top',
						formatter: params => {
							return params.value;
						}
					},
					barWidth: 32,
					itemStyle: {
						color: function (params) {
							var colorList = ['#006AFD', '#448EFD', '#5BA2FD', '#66AFF9', '#77B4F0', '#91C4F7', '#BDDAF7'];
							return colorList[params.dataIndex];
						},
						barBorderRadius: [5, 5, 5, 5]
					}
				}
			]
		}
	)
})



</script>



<style lang="scss" scoped>
@import url('../../../../common/css/certificateCategory.scss');
</style>

